<template>
  <div>
    <a-card
      title="我的资源"
      style="width: 110.5vh; margin-left: 2.49vh; margin-top: 2.3vh"
      :bordered="false"
    >
      <a-row style="text-align: center; margin-top: -2.3vh">
        <a-col :span="6"> <h3>云服务器</h3> </a-col>
        <a-col :span="6"> <h3>运行中</h3> </a-col>
        <a-col :span="6"> <h3>即将过期</h3> </a-col>
        <a-col :span="6"> <h3>已过期</h3> </a-col>
      </a-row>
      <a-row style="text-align: center; margin-top: 1.5vh">
        <a-col :span="6">
          <h2>1</h2>
        </a-col>
        <a-col :span="6"> <h2>1</h2> </a-col>
        <a-col :span="6"> <h2>0</h2> </a-col>
        <a-col :span="6"> <h2>0</h2> </a-col>
      </a-row>
      <a-button
        type="primary"
        style="
          margin-right: 2.3vh;
          margin-left: 4.6vh;
          margin-bottom: 0rem;
          top: 4.6vh;
        "
      >
        创建实例
      </a-button>
      <a-button type="primary" ghost style="top: 4.6vh"> 资源概览 </a-button>
      <a-input-search
        placeholder="可按id、名称、ip等属性模糊搜索云服务器，多个关键字用“,”隔开"
        enter-button
        @search="onSearch"
        style="width: 60%; margin-left: 37.95vh; margin-top: 0rem"
      />
    </a-card>
    <div style="margin-left: 117.3vh">
      <a-card
        title="安全状态"
        :bordered="false"
        style="position: relative; top: -33vh; width: 49.6vh"
      >
        <p>严重漏洞共：<strong>5</strong>项</p>
        <p>轻微漏洞共：<strong>5</strong>项</p>
        <p>可忽略漏洞共：<strong>5</strong>项</p>
        <li>
          严重漏洞建议修复，位于实例
          <a-tag color="#108ee9">{{ $global.randomStr(18) }}</a-tag>
        </li>
        <a-alert
          message="web入侵风险较高"
          type="warning"
          show-icon
          style="margin-top: 2vh"
        />
        <a-alert
          message="SSl未配置（1台）"
          type="warning"
          show-icon
          style="margin-top: 2vh"
        />
      </a-card>
      <a-card style="width: 111vh; margin-left: -115vh; margin-top: -46.9vh">
        <h2 style="color: #108ee9">{{ $global.randomStr(18) }}</h2>
        <p>名称:{{ $global.randomStr(18) }}</p>
        <p>地域: 北京</p>
        <p>公网ip: 112.121.123.123</p>
      </a-card>
      <div style="margin-top: -10.6vh">
        <a-carousel
          autoplay
          style="
            text-align: center;
            height: 31.2vh;
            line-height: 20.6vh;
            background: #3fefee;
            overflow: hidden;
            top: 20.6vh;
            width: 49.6vh;
          "
        >
          <div><h3>1</h3></div>
          <div><h3>2</h3></div>
          <div><h3>3</h3></div>
          <div><h3>4</h3></div>
        </a-carousel>
      </div>
    </div>
    <div style="margin-top: -18.6vh">
      <a-card
        title="我的权益"
        :bordered="false"
        style="width: 111vh; margin-left: 2.3vh"
      >
        <a-card style="width: 50%; height: 31.5vh; margin-bottom: -31.5vh">
          <h1>双11返场 ECS规格升级6.5折</h1>
          <p>双11都过了，啥也没买，因为朱珺阳不发工资</p>
          <a-button type="primary"> 发工资 </a-button>
        </a-card>
        <a-card style="width: 50%; height: 31.5vh; left: 55.2vh">
          <h1>双11返场 带宽升级6.5折，稳赚不赔</h1>
          <p>明天朱珺阳床上一日游</p>
          <a-button type="primary"> 发工资 </a-button>
        </a-card>
      </a-card>
    </div>
    <div style="margin-left: 117.44vh; margin-top: -21.6vh">
      <a-card title="常用功能" :bordered="false" style="width: 49.6vh">
        <a-row type="flex" justify="space-around">
          <a-col :span="3">
            <a-icon
              type="dollar-circle"
              theme="filled"
              style="font-size: 4vh; margin-left: -0.46vh"
            />
          </a-col>
          <a-col :span="3">
            <a-icon type="user" style="font-size: 4vh; margin-left: 0.46vh" />
          </a-col>
          <a-col :span="4">
            <a-icon
              type="profile"
              style="font-size: 4vh; margin-left: 1.15vh"
            />
          </a-col>
        </a-row>
        <a-row style="margin-left: -1.15vh" type="flex" justify="space-around">
          <a-col :span="5"> 续费管理 </a-col>
          <a-col :span="5"> 个人信息 </a-col>
          <a-col :span="5"> 优化建议 </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>
